<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>初识vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- {{xxx}}：插值语法 -->
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
        </div>
    </body>

    <!--
      注意区分：js表达式和js代码(语句)
      1、js表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方（如：a+b、demo(1)、三目运算符等都属于表达式）
      2、js代码：if(){}、for(){}等只处理值而不生产值的就属于代码，比如经过if判断里面的代码是否执行；通过for循环执行n次等
      简单来说就是：值=表达式，逻辑=代码
    -->
    <script type="text/javascript">
        Vue.config.productionTip = false;

        // 创建Vue实例
        new Vue({
            // el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root'), // 不推荐
            el: '#root',    // 推荐，因为更简洁
            // data中用于存储数据，数据供el所指定的容器去使用
            data: {
                name: '张三',
                age: 18
            }
        });
    </script>
</html>